﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="Images/ico/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link type="text/css" rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script type="text/javascript" src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/xcity.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/layui-post.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
<script type="text/javascript" src="/js/map.jquery.min.js"></script>
<style type="text/css">
.layui-disabled{  color: black!important;  }
h1{font-size: 26px;}
p{font-size: 14px; margin-top: 10px;}
pre{background:#eee;border:1px solid #ddd;border-left:4px solid #f60;padding:15px;margin-top: 15px;}
h2{font-size: 20px;margin-top: 20px;}
.case{margin-top: 15px;width:400px;}
.bMap{position: relative;margin-bottom: 20px;}
.bMap .map-warp{position: absolute;left:0;width:100%;height:360px;top:34px;display: none;}
.bMap input{width:96%;height:2.5em;line-height: 2.5em;border:1px solid #d7d7d7;padding-left: 10px;}
.tangram-suggestion-main{z-index: 9999}
</style>
</head>
<body style="background:#F5F5F5;">
<div class="ng-scope">
    <div class="addr_con">
        <form class="layui-form layui-form-pane">
            <div class="add_addr_dasha">姓名手机</div>
            <input class="aui-Address-box-input" name="person" id="person" lay-verify="required" placeholder="请输入姓名或者昵称" type="text">
            <input class="aui-Address-box-input" name="telPhone" id="telPhone" lay-verify="required|phone" placeholder="请输入手机号码" type="number">
            <div class="add_addr_dasha">收货地址<span style="font-size: 10px;color: #d1cccc;">（配送范围10公里以内）</span></div>
<!--            <div class="x-city" id="startStation" style="margin-bottom: 20px;">-->
<!--                <div class="layui-input-inline" style="width: 33%;">-->
<!--                    <select class="layui-input layui-disabled" disabled lay-filter="province" id="provid" lay-verify="required"><option value="">请选择省</option></select>-->
<!--                </div>-->
<!--                <div class="layui-input-inline" style="width: 33%;margin-left: -4px;">-->
<!--                    <select class="layui-input layui-disabled" disabled lay-filter="city" id="cityid" lay-verify="required" ><option value="">请选择市</option></select>-->
<!--                </div>-->
<!--                <div class="layui-input-inline" style="width: 33%;margin-left: -4px;">-->
<!--                    <select class="layui-input layui-disabled" disabled lay-filter="area" id="areaid" lay-verify="required"><option value="">请选择县/区</option></select>-->
<!--                </div>-->
<!--            </div>-->
            <div class="bMap" id='case1'></div>
            <input class="aui-Address-box-input" name="detail" lay-verify="required" id="detail" placeholder="请输入详细地址" type="text">
            <a href="javascript:;" class="red-color" style="border-radius: 10px;position: fixed;width: 92%;left: 4%;bottom: 20px;" id="btnSave" lay-submit="" lay-filter="add">保 存</a>
        </form>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
$.ajaxSetup({contentType: "application/json; charset=utf-8"});
var userInfo = $.parseJSON(sessionStorage.getItem("userInfo"));
var trueAddress = "",longitude = "",latitude = "";
var pt_start = new BMap.Point(114.531303,32.209575),distance,map = new BMap.Map()
layui.use(['form','layer',], function(){
    $("#startStation").xcity('河南','信阳市','罗山县');
    $.post("/cateringAddress/select",JSON.stringify({sysId:getQueryString("sysId")}),function(res){
        for(var i in res.data){
            // var ad = res.data[i].address.split("-")
            $("#person").val(res.data[i].person)
            $("#telPhone").val(res.data[i].telPhone)
            $("#detail").val(res.data[i].detail)
            // $("#provid").val(ad[0])
            // $("#cityid").val(ad[1])
            // $("#areaid").val(ad[2]);

            $("#case1").bMap({name:"callback",address:res.data[i].address,callback:function(address,point){
                trueAddress = address.province+address.city+address.district+address.street+address.streetNumber+address.business;
                longitude = point.lng;
                latitude = point.lat;
                var pt = new BMap.Point(point.lng,point.lat)
                distance = Math.ceil(map.getDistance(pt,pt_start))
            }});
        }
    })
    layui.form.on('submit(add)', function(data){
        if(isEmpty(trueAddress)) layer.msg("请选择地址",{icon:0,time:1000})
        else if(distance/1000 > 10) layer.msg("超出配送范围，请重新选择",{icon:0,time:2000})
        else {
            // data.field.address = $("#provid").val() + "-" + $("#cityid").val() + "-" + $("#areaid").val();
            data.field.address = trueAddress;
            data.field.sysId = getQueryString("sysId");
            data.field.longitude = longitude
            data.field.latitude = latitude
            $.post("/cateringAddress/update", JSON.stringify(data.field), function (res) {
                if (res.success) layer.msg(res.msg, {icon: 1, time: 1500}, function () {
                    parent.layer.closeAll();
                    parent.location.reload()
                });
            })
        }
    })
});
</script>